
.CodeMirror-line::selection {
    color: #fff !important;
    background: #088 !important;
}
.cm-s-monokai.CodeMirror {
    display: inline-block;
    width: 50%;
    height: 100%;
}
.cm-s-monokai {
    background: rgb(30, 30, 30) !important;
}

.CodeMirror-scroll {
    padding: 15px 0;
    height: calc(100% - 30px);
    overflow-x: hidden !important;
}

.cm-keyword,
.emmet-open-tag,
.emmet-close-tag,
.cm-tag {
    color: rgb(86, 156, 214) !important;
}

/* js变量名 */

/* 普通标签、尖括号 */
.cm-bracket {
    color: rgb(128, 128, 103) !important;
}

/* 注释 */
.cm-comment {
    color: rgb(106, 153, 85) !important;
}

/* 属性值 , 样式值*/
.cm-atom,
.cm-string {
    color: rgb(206, 145, 120) !important;
}

.cm-qualifier {
    color: rgb(215, 186, 125) !important;
}

.cm-property,
.cm-number {
    color: rgb(220, 220, 157) !important;
}

.cm-tab {
    color: rgb(201, 212, 212) !important;
}

/* 属性名、js变量名 */
.cm-property,
.cm-def,
.cm-attribute,
.cm-variable {
    color: rgb(156, 220, 254) !important;
}

.cm-type {
    color: rgb(169, 183, 198) !important;
}

.cm-def {
    color: rgb(255, 198, 109) !important;
}

.CodeMirror-linenumber {
    color: rgb(133, 133, 133) !important;
}

/* 默认隐藏，鼠标悬停显示滚动条 */

.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background-color: rgb(51, 51, 51) !important;
    border-radius: 10px !important;
}

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(51, 51, 51) !important;
    border-radius: 10px !important;
    height: 10px !important;
}

.CodeMirror:hover .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background-color: #999 !important;
}

.CodeMirror {
    transition: all 0.3s;
}